<template>
  <div class="collect-container">
    <ul class="collectList">
      <li v-for="(collect,index) in collects" :key="index" style="width: 336px">
        <el-card style="background-color: #f9f9f9; width: 70%; display: inline-block;">
          <div class="pic">
            <el-image :src="`${SERVER_ADDR}/goods/pic/${collect.goods.picList[0].url}`"
                      style="width: 200px; height: 200px; margin-top: 10px" fit="contain"
                      @click="toGoodsView(collect.goods.id)"/>
          </div>
          <div class="area" style="color: #666;">{{ collect.goods.name }} -- {{ collect.goods.color }} - {{ collect.goods.version }}</div>
          <div class="price" style="color: #009688;">售价￥{{ collect.goods.price }}</div>
          <div class="markPrice" style="color: #999;text-decoration: line-through;">原价￥{{ collect.goods.markPrice }}</div>
          <div class="score">
            <el-rate
                v-model="collect.goods.score"
                :colors="['#FF6800','#ff6800','#FF6800']"
                disabled
                score-template="{value} 分"
                show-score
                text-color="#ff6800"
            />
          </div>
          <div class="createTime" style="color: #888;">收藏时间:{{ collect.createTime }}
            <el-button size="small" style="float: right;" type="danger" @click.stop="deleteCollect(collect.id)">
              <el-icon>
                <Star/>
              </el-icon>
              取消收藏
            </el-button>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script setup>
import collectApi from "@/api/collectApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);

// 定义响应式数据
const collects = ref([]);

function selectByPage() {
  collectApi.selectByUserId(1, 5)
      .then(resp => {
        console.log(resp.data)
        if (resp.code === 10000) {
          collects.value = resp.data.list
          console.log(resp.data.list)
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

//取消收藏
function deleteCollect(id) {
  collectApi.delete(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          //刷新
          selectByPage()
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

//跳转到商品详情页
function toGoodsView(id) {
  router.push({
    path: '/user/goods',
    query: {
      id
    }
  });
}

selectByPage(1)
</script>

<style scoped>
.collectList {
  list-style: none;
  padding: 0;
}
.img {
  border-radius: 5px;
}
.area {
  font-size: 14px;
}
.price {
  font-weight: bold;
}
.markPrice {
  font-size: 12px;
}
.score {
  margin-top: 5px;
}
.createTime {
  font-size: 12px;
}
.collect-container {
  text-align: left;
}
.collectList li {
  display: inline-block;
  vertical-align: top;
}
.collectList li[data-v-1d9310d8] {
  margin-right: 0px;
}
</style>